
<template>
	<!-- 组件-教学计划表格 -->
	<div class="recipes-type">
		<el-row :gutter="10" style="margin-top:0.1rem;">
			<el-col :span="6">
				<el-input v-model="searchParam.keywords" placeholder="输入菜品名称搜索" ></el-input>
			</el-col>
			<el-col :span="4">
				<el-button @click="search(1)">搜索</el-button>
			</el-col>
			<el-col :span="14" style="text-align:right;">
				<el-button @click="visibleTypeDialog(true)">添加类型</el-button>
			</el-col>
		</el-row>
		<table class="table" cellspacing="0" style="width: 100%;margin-top:0.1rem;">
			<thead class="thead">
				<tr>
					<td style="width: 10%;">类型序号</td>
					<td style="width: 40%;">类型名称</td>
					<td style="width: 40%;">创建时间</td>
					<td style="width: 10%;">操作</td>
				</tr>
			</thead>
			<tbody class="tbody">
				<tr v-for="(item,index) in tableList" :key="index">
					<td></td>
					<td></td>
					<td></td>
					<td>
						<el-button type="text" @click="visibleTypeDialog(true,'编辑类型',item)">编辑</el-button>
						<el-button type="text" @click="deleteRow(item)">删除</el-button>
					</td>
				</tr>
			</tbody>
		</table>
		<el-row>
			<el-pagination
				class="page"
				layout="total, sizes, prev, pager, next, jumper"
				:current-page="searchParam.currPage"
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:total="searchParam.total"
			></el-pagination>
		</el-row>

		<el-dialog
			class="typedialog"
			:title="dialogObj.title"
			:visible.sync="dialogObj.visible"
			width="30%">
				<el-row>
					<el-col :span="4"><span class="formLable">序号</span></el-col>
					<el-col :span="20">
						<el-input-number :controls="false" v-model="dialogObj.typeIndex" :min='0'></el-input-number>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="4"><span class="formLable">类别名称</span></el-col>
					<el-col :span="20">
						<el-input placeholder="请输入类别名称" maxlength="20" v-model="dialogObj.typeName" clearable></el-input>
					</el-col>
				</el-row>
				<el-row style="text-align:center;">
					<el-button @click="visibleTypeDialog(false)">取消</el-button>
					<el-button @click="save">确定添加</el-button>
				</el-row>
		</el-dialog>
	</div>
</template>

<script>
	let vm=this;
	export default{
		components:{},
		data(){
			return {
				
				searchParam:{
					keywords:'',
					pageSize:10,
					currPage:1,
					total:0
				},
				tableList:[{}],
				dialogObj:{
					title:'添加类型',
					visible:false,
					typeIndex:'',
					typeName:'',
				}
			}
		},
		methods:{
			campusChange : function(campusId) { //校区改变
				
			},
			init(){

			},
			pageSizeChange(val){
				this.searchParam.pageSize=val;
				this.search(1);
			},
			curPageChange(val){
				this.search(val);
			},
			search(pIndex){
				this.searchParam.currPage=pIndex||this.searchParam.currPage;

			},

			visibleTypeDialog(val,title='添加类型',data={}){
				this.dialogObj.visible=val;
				this.dialogObj.title=title;

				this.dialogObj.typeIndex=data.index||'';
				this.dialogObj.typeName=data.name||'';
			},
			save(){
				if(!this.dialogObj.typeIndex){
					this.$message({
						type:'warning',
						message:'序号不可为空！'
					});
					return;
				}
				if(!this.dialogObj.typeName){
					this.$message({
						type:'warning',
						message:'类别名称不可为空！'
					});
					return;
				}
				//支持字母、数字、汉字和()_-
				let result= /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\(\)\（\）\-\_\[\]]/.test(this.dialogObj.typeName);
				if(result){
					vm.$message({
						type:'warning',
						message:'类别名称包含非法字符，请重新输入！'
					});
					return;
				}

				// vm.search(1);
			},
			deleteRow(item){
				this.$confirm("此操作将删除该餐点类型, 是否继续?", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
					center: true
				})
				.then(() => {
					//删除

					// vm.search(1);
				})
				.catch(() => {});
			},
		},
		mounted(){
			vm=this;
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	.recipes-type{
		.el-row{
			margin-bottom: 0.1rem;
		}
		.typedialog{
			.formLable,.formValue{
				font-size: 0.16rem;
				line-height: 0.4rem;
			}
			.formLable::before{
				content: '*';
				color: red;
				margin: 0 0.05rem;
			}
		}
	}

	/*自定义滚动条样式*/
	// .box-tasks::-webkit-scrollbar {
	// 	// height: 0.08rem;
	// 	width: 0.05rem;
	// }
	// .box-tasks::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .box-tasks::-webkit-scrollbar-track {
	// 	background: rgba(242, 246, 252, 0);
	// }	

	
</style>
<style scoped src="@/style/module/table.css"></style>